<template>
  <div :class="{'active':isActive,'error':hasError}"></div>
  <div class="error" :class="{'active':isActive}"></div>
  <div :class="[activeClass,errorClass]"></div>
  <div :class="[flag?activeClass:errorClass]"></div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  setup () {
    const state = reactive({
      flag: true,
      isActive: true,
      hasError: false,
      activeClass: 'active',
      errorClass: 'error'
    })

    return {
      ...toRefs(state)
    }
  }
}
</script>

<style  scoped>
.active{
  margin-left: 200px;
  margin-top: 20px;
  height: 30px;
  width:100px;
  border: 1px solid black;
}
.error{
 background-color: grey;
}
</style>